import styles from './index.module.scss'
import dynamic from 'next/dynamic'
import { useState } from 'react'
import { goBack } from '@/utils/utils'
const Button = dynamic(() => import('@c/button'))

const Index = ({ name }) => {
  const [show, setShow] = useState(false)
  return (
    <div
      className={styles.error}
      onClick={() => setShow(!show)}
      onMouseEnter={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      <div className={styles.backToBox} style={{ maxHeight: show ? 80 : 0 }}>
        <Button className={styles.backTo} onClick={() => goBack()}>
          <img loading="lazy" src="/images/play-back.png" alt="返回" />
        </Button>
        <span className={styles.span}>{name}</span>
      </div>
      <img loading="lazy" alt="异常" src="/images/error.png" />
      <p>自建源播放异常，失效啦~</p>
      <a className={styles.toTg} href="https://t.me/+OPQzYYKfMK04ODU1" target="_blank">
        去<span className="text-theme">TG群</span>获取新的自建源吧
      </a>
    </div>
  )
}

export default Index
